<!DOCTYPE html>
<html>

<head> 
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/address.css" />

</head>

<body>

    <div id="address">
        <h3>送货地址确认</h3>
        <ul>
            <li>省份：<select id="a1" onchange="addOption()"></select></li>
            <li>街道：<input type="text" name="" id="" value="" /></li>

            <li>门牌号：<input type="text" name="" id="" value="" /></select>
            </li>
        </ul>
        <div id="button">
            <button type="button">确认</button>
        </div>

    </div>


   <script type="text/javascript">
        var city = new Array;
        city['北京市'] = ['海淀区', '保定区', '朝阳区', '房山区', '大兴区'];
        city['山东省'] = ['青岛市', '烟台市', '济南市'];
        city['上海市'] = ['黄浦区', '虹口区', '金山区', '宝山区', '静安区'];
        city['天津市'] = ['北辰区', '武清区', '西青区', '津南区', '大兴区'];
        city['湖南省'] = ['长沙市', '株洲市', '岳阳市', '常德市', '大兴区'];
        city['湖北省'] = ['武汉市', '黄石市', '宜昌市', '襄阳市', '大兴区'];
        city['广东省'] = ['广州市', '深圳市', '珠海市', '汕头市', '大兴区'];
        city['广西省'] = ['南宁市', '梧州市', '榆林市', '桂林市', '大兴区'];
        city['河南省'] = ['郑州市', '许昌市', '洛阳市', '开封市', '大兴区'];
        city['河北省'] = ['唐山市', '邯郸市', '保定市', '沧州市', '大兴区'];
        city['青海省'] = ['西宁市', '海东市', '玉树市', '格尔木市', '大兴区'];
        city['陕西省'] = ['西安市', '铜川市', '宝鸡市', '咸阳市', '大兴区'];


        function allCity() {
            var select1 = document.getElementById("a1");
            for (var i in city) { //这里注意遍历数组的写法
                select1.add(new Option(i, i), null);
            }
            addOption(); // 初始化选项     
        }

        function addOption() {
            var select2 = document.getElementById("a2");
            var select1 = document.getElementById("a1").value;
            select2.length = 0; //每次都先清空一下市级菜单  
            if (select1 != '请选择省份') {
                for (var i in city[select1]) {
                    select2.add(new Option(city[select1][i], city[select1][i]), null);
                }
            } else if (sheng == '请选择省份') {
                select2.length = 0;
                select2.add(new Option("请选择城市", "请选择城市"), null);
            }
        }
        window.onload = allCity();
    </script>
</body>
